<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>

      <button @click="getRouter">获取动态路由数据</button>
      <button @click="loginOut">退出</button>

      <!-- 后端的动态路由数据   登陆事件触发以后状态改为true-->
      <div v-if="state == true">
        <div v-for="(item, index) in routerData" :key="index">
          <router-link :to="item.path">{{ item.tit }}</router-link>
        </div>
      </div>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>


<script>
// 路由数据的引入
import routerData from "@/utils/utils";

import { routerPageAdd } from "./router/index";

// 仓库的引入

import store from "./store/index";

export default {
  data() {
    return {
      // 路由数据的引入
      routerData,
      // 判断登录状态
      state: false,
    };
  },
  // 一进入页面，判断是否登陆
  mounted() {
    let loginStatus = localStorage.getItem("login");
    // 如果是登录状态，就获取路由信息
    if (loginStatus == "true") {
      this.getRouter();
    } else {
      console.log("退出状态");
    }
  },
  methods: {
    // 登陆事件
    getRouter() {
      // 路由表【router.js】添加路由
      routerPageAdd(this.routerData);
      //  状态机--缓存路由信息
      store.dispatch("RouterInformation", this.routerData);
      //  修改登录状态
      this.state = true;
      // 本地存储登录状态
      localStorage.setItem("login", "true");
    },

    // 推出登陆
    loginOut() {
      // 清空缓存
      localStorage.clear();
      // 跳转路由-刷新当前页面
      location.reload();
    },
  },
};
</script>

<style lang="scss">
#app {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  #nav {
    width: 200px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    align-items: center;
    a {
      margin-top: 20px;
    }
  }
}
</style>
